/* Base Template CSS Variables & Custom Styles */
:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.75rem;
}

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
}

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    background-image: radial-gradient(circle at 1px 1px, hsl(var(--border)) 1px, transparent 0);
    background-size: 1.5rem 1.5rem;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
}

html {
    scroll-behavior: smooth;
}

/* Header hide on scroll */
.header-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.header-visible {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

/* Sidebar adjustment when header is hidden */
.sidebar-top {
    top: 1rem !important;
    transition: top 0.3s ease-in-out;
}

.sidebar-normal {
    top: 6rem !important;
    transition: top 0.3s ease-in-out;
}

/* Left sidebar navigation styles */
.sidebar-section-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #3b82f6; /* 明亮的蓝色 */
    letter-spacing: 0.05em;
}

.sidebar-section-title svg {
    color: #f59e0b; /* 明亮的橙色图标 */
}

.sidebar-nav-item {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* 暗淡的灰色 */
}

.sidebar-nav-item:hover {
    color: hsl(var(--foreground));
}

/* 在线客服 */
.online-service {            
    z-index: 99999;
}

.online-service .hidden {
    visibility: hidden;
}

.online-service ul li {
    width: 64px;
    height: 64px;
    text-align: center;
    background: #ffffff;
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);*/
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 0px 20px -4px rgba(0, 0, 0, 0.08);
    filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11));
}

.online-service ul li:nth-child(2) {
    background: transparent;
}

.online-service ul li .img-box {
    padding-top: 13px;
    display: block;
}

.online-service ul li .intro-name {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #1e2221;
    display: block;
    padding: 6px 6px 0;
}

.online-service ul li img {
    margin: 0 auto;
}

.online-service ul li:nth-child(1) {
    margin-bottom: 16px;
}

.online-service ul li:nth-child(1) .block {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-image: url(/static/img/service00.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.online-service ul li:nth-child(1) span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 18px;
    background: #4385ff;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 8px 8px;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    color: #ffffff;
    position: absolute;
    bottom: -10px;
}



.online-service ul li:nth-child(1) a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}



.online-service ul li:nth-child(2) img {
    width: 26px;
    height: 23.19px;
}

.online-service ul li:nth-child(3) img {
    width: 26px;
    height: 21.18px;
}

.online-service ul li:nth-child(4) img {
    width: 24px;
    height: 24px;
}

.online-service ul li:nth-child(5) img,
.online-service ul li:nth-child(6) img {
    width: 24px;
    height: 24px;
}

.online-service ul li:nth-child(7) {
    display: block;
    width: 32px;
    height: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    background: #ffffff;
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
    border-radius: 16px;
    box-shadow: 0px 0px 20px -4px rgba(0, 0, 0, 0.08);
    filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11));
}

.online-service ul li:nth-child(7) img {
    width: 14px;
    height: 11.5px;
}

.online-service ul li:nth-child(7) .intro-name {
    display: none;
}

.hidden-service {
    display: none !important;
}

/**box*/
/**hover优化*/
.online-service ul li .box {
    background-color: transparent;
    display: block;
    width: 100px;
    height: 80px;
    position: absolute;
    left: -36px;
    top: 0;
}

.online-service ul li:nth-child(1) .box {
    left: -20px;
}

.online-service ul li .service-fixed {
    position: absolute;
    right: 60px;
    top: 3px;
}

.online-service ul li .info-box {
    position: relative;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
    right: 16px;
    text-align: left;
    /*display: none;*/
    /*top: 7px;*/
}

.online-service ul li .info-box::after {
    content: "";
    display: block;
    width: 8px;
    height: 17px;
    position: absolute;
    right: -6px;
    top: 20px;
    background-image: url(/static/img/icon_box.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.online-service .on-box {
    /*top: 0;*/
    right: 16px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 0px 20px -4px rgba(0, 0, 0, 0.08);
    filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.11));
    position: relative;
}

.online-service .on-info-title {
    display: flex;
    justify-content: space-between;
}

.online-service .on-info-box {
    min-width: 168px;
    padding: 10px 27px 10px 14px;
    position: relative;
    cursor: pointer;
    z-index: 99;
}

.online-service .hide {
    display: none;
}

.online-service .on-info-box::after {
    content: "";
    display: block;
    width: 8px;
    height: 17px;
    position: absolute;
    right: -6px;
    top: 20px;
    background-image: url(/static/img/icon_box.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.online-service .on-info-box .on-img-box {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 12px;
}

.online-service .on-info-box .on-title {
    height: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #4385ff;
    padding-bottom: 2px;
}

.online-service .on-info-box .on-sub-title {
    min-height: 21px;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    text-align: left;
    color: #595959;
}

.online-service ul li:nth-child(1) .info-box，.online-service ul li:nth-child(3) .info-box {
    min-width: 171px;
    top: 0;
    padding: 19px;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #4385ff;
}

.online-service ul li:nth-child(2) .info-box label {
    cursor: pointer;
}

.online-service ul li:nth-child(3) .info-box {
    width: 230px;
    height: 230px;
    padding: 10px 10px 0;
    top: -32px;
}

.online-service ul li:nth-child(4) .info-box::after {
    top: 55px;
}

.online-service ul li:nth-child(4) .info-box img {
    width: 200px;
    height: 196px;
}

.online-service ul li:nth-child(4) .info-box p {
    left: 15px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #4385ff;
    padding: 4px;
}

#service-contact .info-box {
    padding: 15px;
    line-height: 1.5;
}

.online-service ul li:nth-child(4) .info-box {
    width: 210px;
    height: 100px;
    padding: 10px 10px 0;
    top: -32px;
    background-color: #ffffee;
}

.online-service ul li:nth-child(4) .info-box::after {
    top: 55px;
}



.online-service ul li:nth-child(4) .info-box p {
    left: 15px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #4385ff;
    padding: 4px;
}

/*抖动*/
.online-service .block {
    animation-name: shock;
    animation-iteration-count: infinite;
    animation-duration: 2000ms;
    animation-direction: normal;
    animation-timing-function: linear;
}

@keyframes shock {
    0% {
        transform-origin: bottom;
        transform: rotate(0);
    }

    2% {
        transform-origin: bottom;
        transform: rotate(-1.2deg);
    }

    4% {
        transform-origin: bottom;
        transform: rotate(-2deg);
    }

    6% {
        transform-origin: bottom;
        transform: rotate(-2.1deg);
    }

    8% {
        transform-origin: bottom;
        transform: rotate(-1.1deg);
    }

    10% {
        transform-origin: bottom;
        transform: rotate(5deg);
    }

    12% {
        transform-origin: bottom;
        transform: rotate(5.1deg);
    }

    14% {
        transform-origin: bottom;
        transform: rotate(3.9deg);
    }

    16% {
        transform-origin: bottom;
        transform: rotate(-3.1deg);
    }

    18% {
        transform-origin: bottom;
        transform: rotate(-4deg);
    }

    20% {
        transform-origin: bottom;
        transform: rotate(-3.6deg);
    }

    22% {
        transform-origin: bottom;
        transform: rotate(-1.9deg);
    }

    24% {
        transform-origin: bottom;
        transform: rotate(2.2deg);
    }

    26% {
        transform-origin: bottom;
        transform: rotate(3deg);
    }

    28% {
        transform-origin: bottom;
        transform: rotate(2.7deg);
    }

    30% {
        transform-origin: bottom;
        transform: rotate(1.5deg);
    }

    32% {
        transform-origin: bottom;
        transform: rotate(-0.2deg);
    }

    34% {
        transform-origin: bottom;
        transform: rotate(-1.6deg);
    }

    36% {
        transform-origin: bottom;
        transform: rotate(-2deg);
    }

    38% {
        transform-origin: bottom;
        transform: rotate(-1.7deg);
    }

    40% {
        transform-origin: bottom;
        transform: rotate(-1.1deg);
    }

    42% {
        transform-origin: bottom;
        transform: rotate(-0.4deg);
    }

    44% {
        transform-origin: bottom;
        transform: rotate(0deg);
    }

    46% {
        transform-origin: bottom;
        transform: rotate(0deg);
    }

    100% {
        transform-origin: bottom;
        transform: rotate(0deg);
    }
}

/**hover */
.online-service ul li:not(:last-child):hover {
    background: #ecf3ff;
}

.online-service ul li:nth-child(4):hover .service-fixed,
.online-service ul li:nth-child(3):hover .service-fixed {
    display: block;
}

.online-service ul li#service-open:hover .service-fixed,
.online-service ul li#service-contact:hover .service-fixed {
    display: block;
}

.online-service ul li .service-fixed {
    display: none;
}

/**动态效果-抖动 */
.culture-block {
    /*animation-name: shock;*/
    animation-iteration-count: infinite;
    animation-duration: 2000ms;
    animation-direction: normal;
    animation-timing-function: linear;
}

.culture-block:hover {
    animation-name: none;
}

@keyframes shock {
    0% {
        transform-origin: bottom;
        transform: rotate(0);
    }

    2% {
        transform-origin: bottom;
        transform: rotate(-1.2deg);
    }

    4% {
        transform-origin: bottom;
        transform: rotate(-2deg);
    }

    6% {
        transform-origin: bottom;
        transform: rotate(-2.1deg);
    }

    8% {
        transform-origin: bottom;
        transform: rotate(-1.1deg);
    }

    10% {
        transform-origin: bottom;
        transform: rotate(5deg);
    }

    12% {
        transform-origin: bottom;
        transform: rotate(5.1deg);
    }

    14% {
        transform-origin: bottom;
        transform: rotate(3.9deg);
    }

    16% {
        transform-origin: bottom;
        transform: rotate(-3.1deg);
    }

    18% {
        transform-origin: bottom;
        transform: rotate(-4deg);
    }

    20% {
        transform-origin: bottom;
        transform: rotate(-3.6deg);
    }

    22% {
        transform-origin: bottom;
        transform: rotate(-1.9deg);
    }

    24% {
        transform-origin: bottom;
        transform: rotate(2.2deg);
    }

    26% {
        transform-origin: bottom;
        transform: rotate(3deg);
    }

    28% {
        transform-origin: bottom;
        transform: rotate(2.7deg);
    }

    30% {
        transform-origin: bottom;
        transform: rotate(1.5deg);
    }

    32% {
        transform-origin: bottom;
        transform: rotate(-0.2deg);
    }

    34% {
        transform-origin: bottom;
        transform: rotate(-1.6deg);
    }

    36% {
        transform-origin: bottom;
        transform: rotate(-2deg);
    }

    38% {
        transform-origin: bottom;
        transform: rotate(-1.7deg);
    }

    40% {
        transform-origin: bottom;
        transform: rotate(-1.1deg);
    }

    42% {
        transform-origin: bottom;
        transform: rotate(-0.4deg);
    }

    44% {
        transform-origin: bottom;
        transform: rotate(0deg);
    }

    46% {
        transform-origin: bottom;
        transform: rotate(0deg);
    }

    100% {
        transform-origin: bottom;
        transform: rotate(0deg);
    }
}